<template>
  <div>
    <div id="toolBar1">
      <select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option selected>- formatting -</option>
        <option value="h1">Title 1 &lt;h1&gt;</option>
        <option value="h2">Title 2 &lt;h2&gt;</option>
        <option value="h3">Title 3 &lt;h3&gt;</option>
        <option value="h4">Title 4 &lt;h4&gt;</option>
        <option value="h5">Title 5 &lt;h5&gt;</option>
        <option value="h6">Subtitle &lt;h6&gt;</option>
        <option value="p">Paragraph &lt;p&gt;</option>
        <option value="pre">Preformatted &lt;pre&gt;</option>
      </select>
      <select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- font -</option>
        <option>Arial</option>
        <option>Arial Black</option>
        <option>Courier New</option>
        <option>Times New Roman</option>
      </select>
      <select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- size -</option>
        <option value="1">Very small</option>
        <option value="2">A bit small</option>
        <option value="3">Normal</option>
        <option value="4">Medium-large</option>
        <option value="5">Big</option>
        <option value="6">Very big</option>
        <option value="7">Maximum</option>
      </select>
      <select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- color -</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="black">Black</option>
      </select>
      <select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- background -</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="black">Black</option>
      </select>
    </div>
    <div id="toolBar2">
      <img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src=""
      />
      <img class="intLink" title="Print" onclick="printDoc();" src="">
      <img class="intLink" title="Undo" onclick="formatDoc('undo');" src=""
      />
      <img class="intLink" title="Redo" onclick="formatDoc('redo');" src=""
      />
      <img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="">
      <img class="intLink" title="Bold" onclick="formatDoc('bold');" src=""
      />
      <img class="intLink" title="Italic" onclick="formatDoc('italic');" src=""
      />
      <img class="intLink" title="Underline" onclick="formatDoc('underline');" src=""
      />
      <img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src=""
      />
      <img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src=""
      />
      <img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src=""
      />
      <img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src=""
      />
      <img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src=""
      />
      <img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src=""
      />
      <img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src=""
      />
      <img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src=""
      />
      <img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}"
        src=""
      />
      <img class="intLink" title="Cut" onclick="formatDoc('cut');" src=""
      />
      <img class="intLink" title="Copy" onclick="formatDoc('copy');" src=""
      />
      <img class="intLink" title="Paste" onclick="formatDoc('paste');" src=""
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'editor_nav',
};
</script>

  <script type="text/javascript">
    var oDoc, sDefTxt;

    function initDoc() {
      oDoc = document.getElementById("textBox");
      sDefTxt = oDoc.innerHTML;
      if (document.compForm.switchMode.checked) {
        setDocMode(true);
      }
    }

    function formatDoc(sCmd, sValue) {
      if (validateMode()) {
        document.execCommand(sCmd, false, sValue);
        oDoc.focus();
      }
    }

    function validateMode() {
      if (!document.compForm.switchMode.checked) {
        return true;
      }
      alert("Uncheck \"Show HTML\".");
      oDoc.focus();
      return false;
    }

    function setDocMode(bToSource) {
      var oContent;
      if (bToSource) {
        oContent = document.createTextNode(oDoc.innerHTML);
        oDoc.innerHTML = "";
        var oPre = document.createElement("pre");
        oDoc.contentEditable = false;
        oPre.id = "sourceText";
        oPre.contentEditable = true;
        oPre.appendChild(oContent);
        oDoc.appendChild(oPre);
        document.execCommand("defaultParagraphSeparator", false, "div");
      } else {
        if (document.all) {
          oDoc.innerHTML = oDoc.innerText;
        } else {
          oContent = document.createRange();
          oContent.selectNodeContents(oDoc.firstChild);
          oDoc.innerHTML = oContent.toString();
        }
        oDoc.contentEditable = true;
      }
      oDoc.focus();
    }

    function printDoc() {
      if (!validateMode()) {
        return;
      }
      var oPrntWin = window.open("", "_blank",
        "width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
      oPrntWin.document.open();
      oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" +
        oDoc.innerHTML + "<\/body><\/html>");
      oPrntWin.document.close();
    }
  </script>
